<template>
    <div class="card">
        <slot name="card-icon"></slot>
        <div class="card-main-container">
            <h3 class="card-title">
                {{ title
                }}<span
                    v-if="titleTip && titleTip.defaultValue"
                    class="margin-left-5"
                    ><Poptip
                        trigger="hover"
                        :content="
                            titleTip.key
                                ? $t(titleTip.key, {
                                      defaultValue: titleTip.defaultValue,
                                  })
                                : titleTip.defaultValue
                        "
                        :width="titleTipWidth"
                        word-wrap
                        ><Icon
                            class="card-title-icon"
                            type="md-help-circle" /></Poptip
                ></span>
            </h3>
            <div class="card-content">
                <h3 class="card-content-count">{{ count }}</h3>
                <div class="card-content-percent">
                    <div
                        class="card-content-item"
                        v-for="item in percentList"
                        :key="item.label"
                    >
                        <div class="card-content-item-label">
                            {{ item.label }}
                        </div>
                        <div
                            class="card-content-item-list up"
                            v-if="item.value >= 0"
                        >
                            <Icon
                                class="trangle color-error"
                                type="md-arrow-dropup"
                            />
                            <span class="card-content-item-text color-error"
                                >{{ item.value }}%</span
                            >
                        </div>
                        <div class="card-content-item-list down" v-else>
                            <Icon
                                class="trangle color-success"
                                type="md-arrow-dropdown"
                            />
                            <span class="card-content-item-text color-success"
                                >{{ item.value }}%</span
                            >
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    props: [
        "title",
        "count",
        "percentList",
        "titleTip",
        "titleTipWidth"
    ],
    data() {
        return {};
    },
};
</script>

<style lang="scss" scoped>
.card {
    display: flex;
    align-content: center;
    flex: 1;
    // margin: 0 10px;
    background-color: #fff;
    border: 1px solid #e4e7ed;
    padding: 10px 15px;

    &-title {
        font-size: 12px;
        color: #787a7d;
        font-weight: normal;
        // padding-bottom: 20px;
        // padding: 15px 0;
        // font-size: 18px;
        // text-align: center;
        // border-bottom: 1px solid #CFCFCF;

        &-icon {
            color: #66b1ff;
            font-size: 12px;
            position: relative;
            top: -1px;
            cursor: pointer;
        }
    }
    &-content {
        // padding-top: 15px;
        display: flex;
        align-items: center;

        &-count {
            font-size: 28px;
            // text-align: center;
            margin-right: 20px;
        }
        &-percent {
            margin-top: 10px;
            margin-bottom: 10px;
        }
        &-item {
            display: flex;
            justify-content: center;
            align-items: center;
            // margin-bottom: 5px;

            &-list {
                display: flex;
                align-items: center;
            }

            .trangle {
                font-size: 20px;
            }

            &-text {
                width: 50px;
                // text-align: center;
                // padding-left: 5px;
                font-size: 12px;
            }
            &-label {
                width: 30px;
                padding-right: 5px;
                color: #9e9e9c;
                font-size: 12px;
            }
        }
    }
}
</style>